<template>
	<div class="form-wrap">
		<n-card title="登录" bordered>
			<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" class="form">
				<n-form-item path="username">
					<n-input v-model:value="model.username" placeholder="请输入用户名" />
				</n-form-item>
				<n-form-item path="pwd">
					<n-input v-model:value="model.pwd" type="password" show-pwd-on="click" placeholder="请输入密码" />
				</n-form-item>
				<!-- 选择身份 -->
				<!-- <n-form-item>
					<n-select
						v-model:value="model.role"
						:options="options"
						placeholder="请选择身份"
						:reset-menu-on-options-change="false"
						@scroll="handleScroll"
						@on-update:value="handleUpdateValue"
					/>
				</n-form-item> -->
				<n-space :vertical="true" :size="24">
					<div style="
							display: flex;
							justify-content: space-between;
							align-items: center;
						">
						<n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
						<n-button :text="true" @click="forgetPwd()">忘记密码？</n-button>
					</div>
					<n-button type="primary" size="large" :block="true" :round="true" :loading="loginLoading"
						@click="handleSubmit">
						确定
					</n-button>
				</n-space>
			</n-form>
		</n-card>
	</div>
</template>

<script setup lang="ts">
//@ts-nocheck
import { useGlobalStore } from '@/store/GlobalStore'
import { login } from '@/api/User/login'
const router = useRouter()
const store = useGlobalStore()
const studentNavList = [
	{
		title: '首页',
		link: '/',
		icon: 'home',
	},
	{
		title: '当前实验',
		link: '/experiments',
	},
	{
		title: '完成实验',
		link: '/doneexperiments',
	},
	{
		title: '通过实验',
		link: '/passedexperiments',
	},
]
const teacherNavList = [
	{
		title: '首页',
		link: '/',
		icon: 'home',
	},

	{
		title: '已批阅报告',
		link: '/review-exp',
	},

	{
		title: '未批阅报告',
		link: '/unreview-exp',
	},

	{
		title: '系统管理',
		link: '/test',
	},
]
const rootNavList = [
	{
		title: '首页',
		link: '/',
		icon: 'home',
	},
	{
		title: '学期管理',
		link: '/root/semester',
	},
	{
		title: '实验管理',
		link: '/root/classlist',
	},
	{
		title: '教师管理',
		link: '/root/teachermanage',
	},
]
const loginLoading = ref(false)
const formRef = ref()
const forgetPwd = () => {
	router.push('/forgetPwd')
}
const handleUpdateValue = (val: any) => {
	console.log(val)
}
const model = reactive({
	username: '',
	pwd: '',
	role: '0',
})
// const options = [
// 	{
// 		label: '请选择身份',
// 		value: '0',
// 	},
// 	{
// 		label: 'teacher',
// 		value: '1',
// 	},
// 	{
// 		label: 'student',
// 		value: '2',
// 	},
//{
// 		label: 'root',
// 		value: '3',
// 	},
// ]
// const handleScroll = (e: any) => {
// 	console.log(e)
// }
const rules = reactive({
	username: [
		{
			required: true,
			message: '请输入用户名',
		},
	],
	pwd: [
		{
			required: true,
			message: '请输入密码',
		},
	],
})
const rememberMe = ref(false)

const handleSubmit = async () => {
	// if (model.role === '0') {
	// 	// @ts-ignore
	// 	ElMessage.error('请选择身份')
	// 	return
	// }
	// router.push('/experiments')
	login({
		username: model.username,
		pwd: model.pwd,
	}).then((res) => {
		console.log('res', res)

		if (res.code == 10002) {
			ElMessage.error('密码或用户名错误')
		}
		else if (res.code == 200) {
			// @ts-ignore
			localStorage.setItem('jwtToken', res.data.jwtToken)
			localStorage.setItem('name', res.data.name)
			localStorage.setItem('sid', res.data.sid)
			ElMessage.success('登录成功')
			if (res.data.student != null) {
				console.log("学生登录");
				console.log(res.data.student, '学生数据')
				console.log('username', res.data.student.name)
				console.log('sid', res.data.student.sid)
				store.userInfo.username = res.data.student.name
				store.userInfo.sid = res.data.student.sid
				store.IsLogin = true
				store.NavList = studentNavList
				store.PersonalLoginLink = '/studentpersonal'
				store.userInfo.role = 2
				store.userInfo.cid = res.data.student.cid
				console.log(store.NavList)
			}
			if (res.data.teacher != null) {
				console.log("教师登录");
				console.log(res.data.teacher, '教师数据')
				console.log('username', res.data.teacher.name)
				console.log('tid', res.data.teacher.tid)
				store.userInfo.username = res.data.teacher.name
				store.userInfo.tid = res.data.teacher.tid
				store.userInfo.tphone = res.data.teacher.tel
				store.IsLogin = true
				store.NavList = teacherNavList
				store.PersonalLoginLink = '/teacherpersonal'
				store.userInfo.role = 1
				console.log(store.NavList)
			}
			if (res.data.root != null) {
				console.log("管理员登录");
				console.log(res.data.root, '管理员数据')
				console.log('username', res.data.root.name)
				console.log('rid', res.data.root.rid)
				store.userInfo.username = res.data.root.name
				store.userInfo.rid = res.data.root.rid
				store.IsLogin = true
				store.NavList = rootNavList
				store.PersonalLoginLink = '/rootpersonal'
				store.userInfo.role = 3
				console.log(store.NavList)
			}
			setTimeout(() => {
				router.push('/')
			}, 1000)
		}
	})
}
</script>

<style lang="less" scoped>
.form-wrap {
	width: 100%;
	max-width: 400px;
	height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 0 20px;

	.form {
		width: 100%;

		.form-item {
			.input {
				height: 50px;
				border-radius: 25px;

				&:focus {
					border-color: #409eff;
				}
			}
		}

		.space {
			margin-top: 20px;

			.button {
				height: 50px;
				border-radius: 25px;
			}
		}
	}
}
</style>
